<template>
    <div class="container">
        <div class="left">
            <div class="item">
                <img src="@/assets/img/dev1.png" alt="">
                <div class="text">
                    <h2>一个目标</h2>
                    <p>打造轨道上的“大南昌都市圈”，我市大力推进地铁建设</p>
                </div>
            </div>
            <div class="item">
                <img src="@/assets/img/dev2.png" alt="">
                <div class="text">
                    <h2>两个带动</h2>
                    <p>带动引领城市发展 带动城市产业和经济发展</p>
                </div>
            </div>
            <div class="item">
                <img src="@/assets/img/dev3.png" alt="">
                <div class="text">
                    <h2>三个理念</h2>
                    <p>建设绿色地铁 人文地铁 智慧地铁</p>
                </div>
            </div>
            <div class="item">
                <img src="@/assets/img/dev4.png" alt="">
                <div class="text">
                    <h2>一条市场化发展之路</h2>
                    <p>实现轨道交通和轨道公司的可持续发展</p>
                </div>
            </div>
        </div>
        <div class="right"></div>
    </div>
</template>

<script>
    export default {
        name: "Development"
    }
</script>

<style scoped lang="less">
    .container {
        margin: 50px auto;
        width: 1200px;
        overflow: hidden;

        .left {
            width: 1000px;
            height: 500px;
            float: left;

            .item {
                box-sizing: border-box;
                float: left;
                width: 500px;
                height: 250px;
                position: relative;

                img {
                    width: 500px;
                    height: 250px;
                }

                .text {
                    width: 500px;
                    color: white;
                    background-color: #00000066;
                    position: absolute;
                    bottom: -41px;
                    transition: 0.6s;

                    h2,
                    p {
                        font-weight: normal;
                        padding: 10px;
                    }
                }
            }
            .item:hover> .text {
                bottom: 0px;
            }
        }
        .right {
            width: 200px;
            height: 500px;
            background-image: url("../../assets/img/dev.png");
            background-size: cover;
            background-position: center;
            float: right;
        }
    }


</style>